import { MutableRefObject, DragEvent } from "react";
import { Icomp, Info } from "../../../store/commonStoreTypes";
const OnDrops = (
  e: DragEvent<HTMLElement>,
  viewCan: MutableRefObject<any>
): Icomp | Info => {
  e.preventDefault();
  const comp = JSON.parse(e.dataTransfer.getData("lplp"));
  const endY = e.pageY;
  const endX = e.pageX;
  const viewStyle = {
    top:
      (document.body.clientHeight -
        viewCan.current.style.height.split("px")[0]) /
      2,
    left:
      (document.body.clientWidth - viewCan.current.style.width.split("px")[0]) /
      2,
  };
  const disX = endX - viewStyle.left;
  const disY = endY - viewStyle.top;
  comp.style.left = disX - comp.style.width.split("px")[0] / 2;
  comp.style.top = disY - comp.style.height.split("px")[0] / 2;
  if (comp.key) {
    return {
      index: comp.index,
      left: comp.style.left,
      top: comp.style.top,
    };
  } else {
    return {
      style: {
        ...comp.style,
        position: "absolute",
        width: "40px",
        height: "40px",
        backgroundColor: "#ccc",
        overflow: "hidden",
      },
      value: "111",
      type: 1,
    };
  }
};

export default OnDrops;
